<template>
  <div :class="dialogClass" class="warmPrompt">
    <van-dialog
        v-model="dialogShow"
        :closeOnClickOverlay="closeOnClickOverlay"
        :overlay="overlay"
        :show-confirm-button="false"
        width="3rem"
    >
      <div class="warmPrompt_content">
        <div class="warmPrompt_content_title">{{ title }}</div>

        <div ref="content_static_wrapper" :style="boxShadow" class="warmPrompt_content_text">
          <div ref="content_scroll_wrapper" :style="{'textAlign': textAlign}">
            <div v-if="text">{{ text }}</div>

            <div v-if="textMini !== ''" class="warmPrompt_content_text--mini">{{ textMini }}</div>

            <div v-if="textHtml" v-html="textHtml"></div>
          </div>
        </div>

        <div class="warmPrompt_content_button">
          <van-button v-if="cancelButtonShow"
                      :color="cancelBtnColor"
                      block
                      class="cancelButton"
                      plain
                      @click="cancel">
            {{ cancelButtonText }}
          </van-button>
          <van-button :color="confirmBtnColor"
                      block
                      class="confirmButton"
                      plain @click="confirm">
            {{ confirmButtonText }}
          </van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default  {
  name: 'dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: '温馨提示'
    },

    text: {
      type: String,
      default: ''
    },

    textHtml: {
      type: String,
      default: ''
    },

    textMini: {
      type: String,
      default: ''
    },

    textAlign: {
      type: String,
      default: 'left'
    },

    confirmButtonText: {
      type: String,
      default: '确认'
    },

    cancelButtonShow: {
      type: Boolean,
      default: true
    },

    cancelButtonText: {
      type: String,
      default: '取消'
    },

    overlay: {
      type: Boolean,
      default: true
    },

    closeOnClickOverlay: {
      type: Boolean,
      default: false
    },

    closeOnPopstate: {
      type: Boolean,
      default: false
    },

    cancelBtnColor: {
      type: String,
      default: '#212634'
    },

    confirmBtnColor: {
      type: String,
      default: '#FF4536'
    },

    dialogClass: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      boxShadow: '' // 内容可滚动阴影
    }
  },
  computed: {
    dialogShow: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit('update', val)
      }
    }
  },
  watch: {
    // 监控内容数据判断是否产生阴影
    textHtml: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let height1 = this.$refs.content_static_wrapper.getBoundingClientRect()
                .height
            let height2 = this.$refs.content_scroll_wrapper.getBoundingClientRect()
                .height
            if (height2 > height1) {
              this.boxShadow = 'box-shadow: 0 -0.1rem 0.1rem -0.1rem #d3d4d6 inset;'
            } else {
              this.boxShadow = ''
            }
          })
        }
      },
      immediate: true
    },
    text: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let height1 = this.$refs.content_static_wrapper.getBoundingClientRect()
                .height
            let height2 = this.$refs.content_scroll_wrapper.getBoundingClientRect()
                .height
            if (height2 > height1) {
              this.boxShadow = 'box-shadow: 0 -0.1rem 0.1rem -0.1rem #d3d4d6 inset;'
            } else {
              this.boxShadow = ''
            }
          })
        }
      },
      immediate: true
    },
    textMini: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let height1 = this.$refs.content_static_wrapper.getBoundingClientRect()
                .height
            let height2 = this.$refs.content_scroll_wrapper.getBoundingClientRect()
                .height
            if (height2 > height1) {
              this.boxShadow = 'box-shadow: 0 -0.1rem 0.1rem -0.1rem #d3d4d6 inset;'
            } else {
              this.boxShadow = ''
            }
          })
        }
      },
      immediate: true
    }
  },

  // 方法集合
  methods: {
    // 点击确认按钮
    confirm () {
      this.$emit('click')
    },
    // 点击取消按钮
    cancel () {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>

</style>